<head>
  <script src='../vue.js'></script>
  <style>
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
  </style>
</head>
<body>
<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

<div id="demo2">
  <my-component v-model="test"></my-component>
  <p>{{test}}</p>
</div>

<script>

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

vmtmp = new Vue({
  el: '#demo2',
  data: {
    test: 0
  },
  components: {
    'my-component': {
      props: ['value'],
      render: function (createElement) {
        var self = this
        return createElement('input', {
          domProps: {
            value: self.value
          },
          on: {
            input: function (event) {
              self.$emit('input', event.target.value)
            }
          }
        })
      }
    }
  }
})
</script>
</body>
